<template>
    <div class="comment-item">
         <van-cell>
           <template #icon>
              <van-image
              width="30"
              height="30"
              :src="comment.aut_photo"
              round
              class="avatar"
            />
           </template>
            <template #title>
              <div class="title-wrap">
                <div class="name">{{comment.aut_name}}</div>
                <div class="like-warp" @click="onCommentLike">
                  <van-icon class="like-icon" :class="{linked:comment.is_liking}"  :name="comment.is_liking?'good-job':'good-job-o'"/>
                  <span class="like-count">{{comment.like_count}}</span>
                </div>
              </div>
             <div class="content">{{comment.content}}</div>
             <div style="display:flex;align-items:center;">
               <span class="pubdate">{{comment.pubdate | dataTime('MM-DD HH:mm')}}</span>
               <van-button
                type="default"
                size="mini"
                round
                class="reply-btn"
                @click="$emit('reply-click',comment)"
                >{{comment.reply_count}} 回复</van-button>
             </div>
            </template>
         </van-cell>
    </div>
</template>

<script>
import { addCommentLike, delCommentLike } from '@/apis/comment'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data: function () {
    return {}
  },
  methods: {
    async onCommentLike () {
      let commentId = this.comment.com_id.toString()
      if (this.comment.is_liking) {
        await delCommentLike(commentId)
        this.comment.like_count--
      } else {
        await addCommentLike(commentId)
        this.comment.like_count++
      }
      this.comment.is_liking = !this.comment.is_liking
    }
  }
}
</script>

<style lang="less" scoped>
.comment-item{
  .avatar{
    width: 36px;
    height: 36px;
    margin-right: 14px;
  }
  .title-wrap{
    display: flex;
    justify-content:space-between;
    .like-warp{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .name{
    font-size: 14px;
    color: #406599;
  }
  .content{
    font-size: 16px;
    color: #222222;
  }
  .pubdate{
    font-size: 10px;
    margin-right: 10px;
  }
  .linked{
    color: #ff69b4;
  }
}

</style>>
